<template>
  <div>
    <!-- 1. 默认展示的触发链接 -->
    <el-link type="primary" underline="never" @click="openDialog">
      查看内容
    </el-link>

    <!-- 2. 弹窗组件 -->
    <el-dialog
      v-model="dialogVisible"
      title="内容详情"
      width="60%"
      append-to-body
      draggable
    >
      <!-- 
        3. 富文本内容展示区域
        - 使用 v-html 指令来渲染传入的 HTML 字符串。
        - 添加一个 class "rich-text-content" 以便我们设置样式。
      -->
      <div v-html="modelValue" class="rich-text-content"></div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="closeDialog">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 4. 使用 defineModel 来接收 v-model 传入的数据
// 这会创建一个名为 'modelValue' 的 prop
const modelValue = defineModel({
  type: String,
  default: '',
});

// 5. 控制弹窗显示/隐藏的状态
const dialogVisible = ref(false);

// 6. 定义打开和关闭弹窗的方法
const openDialog = () => {
  dialogVisible.value = true;
};

const closeDialog = () => {
  dialogVisible.value = false;
};
</script>

<style scoped>
/* 7. 为富文本内容区域设置样式 */
.rich-text-content {
  /* 设置一个最大高度，超过此高度将出现滚动条 */
  max-height: 60vh; /* vh 是视口高度单位，60vh 代表视口高度的60% */

  /* 当内容溢出时，显示滚动条 */
  overflow-y: auto;

  /* 为了更好的阅读体验，可以设置一些内边距和行高 */
  padding: 10px;
  line-height: 1.6;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

/* 
  可选：为 v-html 渲染出的内容设置一些通用样式，
  使其在弹窗中看起来更美观。
*/
.rich-text-content :deep(p) {
  margin: 0 0 1em 0;
}

.rich-text-content :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
}

.rich-text-content :deep(h1),
.rich-text-content :deep(h2),
.rich-text-content :deep(h3) {
  margin-bottom: 0.8em;
  font-weight: 600;
}
</style>
